<!DOCTYPE html>
<html >

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>business</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		
		body {
			/* background: url(http://vm.cau.edu.cn/~s2020307150626//resource/image/bg.jpg) no-repeat top center; */
			background: azure;
			line-height: 1.15;
		}

		header {
			position: relative;
			height: 1.25rem;
			background: url(http://vm.cau.edu.cn/~s2020307150626//resource/image/head_bg.png) no-repeat;
			background-size: 100% 100%;
		}

		header h1 {
			font-size: 0.475rem;
			color: #fff;
			text-align: center;
			line-height: 1rem;
		}

		header .showTime {
			position: absolute;
			right: 0.375rem;
			top: 0;
			line-height: 0.9375rem;
			color: rgba(255, 255, 255, 0.7);
			font-size: 0.25rem;
		}

		.mainbox {
			display: flex;
			min-width: 1024px;
			max-width: 1920px;
			margin: 0 auto;
			padding: 0.125rem 0.125rem 0;
		}

		.mainbox .column {
			flex: 5;
			margin: 0 0.125rem 0.1875rem;
			overflow: hidden;
		}


		.mainbox .panel {
			margin: 0 .0625rem .0625rem 0;
			position: relative;
			height: 7.5rem;
			padding: 0 0.1875rem 0.5rem;
			border: 1px solid rgba(25, 186, 139, 0.17);
			margin-bottom: 0.1875rem;
			/* background: url(http://vm.cau.edu.cn/~s2020307150626//resource/image/line\(1\).png) rgba(255, 255, 255, 0.03); */
			background: #FFFFFF;
			border-radius: 20px;
		}

		/* .mainbox .panel::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 10px;
			height: 10px;
			border-left: 2px solid #02a6b5;
			border-top: 2px solid #02a6b5;
			content: "";
		}

		.mainbox .panel::after {
			position: absolute;
			top: 0;
			right: 0;
			width: 10px;
			height: 10px;
			border-right: 2px solid #02a6b5;
			border-top: 2px solid #02a6b5;
			content: "";
		}

		.mainbox .panel .panel-footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
		}

		.mainbox .panel .panel-footer::before {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 10px;
			height: 10px;
			border-left: 2px solid #02a6b5;
			border-bottom: 2px solid #02a6b5;
			content: "";
		}

		.mainbox .panel .panel-footer::after {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 10px;
			height: 10px;
			border-right: 2px solid #02a6b5;
			border-bottom: 2px solid #02a6b5;
			content: "";
		}
 */
		.mainbox .panel h2 {
			height: 0.6rem;
			color: #fff;
			line-height: 0.6rem;
			text-align: center;
			font-size: 0.25rem;
			font-weight: 400;
		}

		.mainbox .panel h2 a {
			color: #fff;
			text-decoration: none;
			margin: 0 0.125rem;
		}

		.mainbox .panel .chart {
			height: 7rem;

		}
/* 
		@keyframes rotate1 {
			form {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}

		@keyframes rotate2 {
			form {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(-360deg);
			}
		}

		/* 约束屏幕尺寸 */
		/* @media screen and (max-width: 1024px) {
			html {
				font-size: 42px !important;
			}
		}

		@media screen and (min-width: 1920px) {
			html {
				font-size: 80px !important;
			}
		} */ 
	</style>
</head>

<body>

	
	<!-- 页面主体部分 -->
	<section class="mainbox">
		<div class="column">

			<div class="panel bar">
				<div class="chart"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line">
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>

		</div>

		<div class="column">
			<div class="panel bar2">
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line2">
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>
		</div>
	</section>


	<script>
		(function flexible(window, document) {
			var docEl = document.documentElement;
			var dpr = window.devicePixelRatio || 1;

			// adjust body font size
			function setBodyFontSize() {
				if (document.body) {
					document.body.style.fontSize = 12 * dpr + "px";
				} else {
					document.addEventListener("DOMContentLoaded", setBodyFontSize);
				}
			}
			setBodyFontSize();

			// set 1rem = viewWidth / 10
			function setRemUnit() {
				var rem = docEl.clientWidth / 24;
				docEl.style.fontSize = rem + "px";
			}

			setRemUnit();

			// reset rem unit on page resize
			window.addEventListener("resize", setRemUnit);
			window.addEventListener("pageshow", function (e) {
				if (e.persisted) {
					setRemUnit();
				}
			});

			// detect 0.5px supports
			if (dpr >= 2) {
				var fakeBody = document.createElement("body");
				var testElement = document.createElement("div");
				testElement.style.border = ".5px solid transparent";
				fakeBody.appendChild(testElement);
				docEl.appendChild(fakeBody);
				if (testElement.offsetHeight === 1) {
					docEl.classList.add("hairlines");
				}
				docEl.removeChild(fakeBody);
			}
		})(window, document);

	</script>
	<!-- 引入js -->
	<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<!-- 引入echarts -->
	<script type="text/javascript" charset="utf8"
		src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
	<script type="text/javascript">
		// 取数据并画员工薪资柱状图
		$(function () {
			$.ajax({
				url: 'employee', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
				async: true, //异步请求，不用管
				success: function (res) { //回调函数，请求成功后打印返回的结果
					// 数据处理
					let name = res.map(function (item, index, array) {
						return item.ENAME
					})
					let wage = res.map(function (item, index, array) {
						return item.WAGES
					})

					let c = echarts.init(document.querySelector('.panel.bar>.chart'), null, {
						renderer: 'canvas',
						useDirtyRect: false
					});
					let app = {};
					// let c = echarts.init(document.querySelector('.d1'))
					let dataAxis = name
					let data = wage
					let yMax = Math.max(wage)
					let dataShadow = [];
					for (let i = 0; i < data.length; i++) {
						dataShadow.push(yMax);
					}
					/** @type EChartsOption */
					op = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow',
								shadowStyle: {
									opacity: 0.2,
								},
							},
							showContent: true,
							confine: true,
							borderWidth: 0,                          //边框线宽
							padding: 5,                              //图例内边距，单位px  5  [5, 10]  [5,10,5,10]

						},
						title: {
							text: '员工薪资图',
							left: 'center',
							textStyle: {
								color: '#000',
							},
						},
						xAxis: {
							data: dataAxis,
							axisLabel: {
								inside: true,
								interval: 0,
								margin: 20,
								color: '#000',
								show: true,
								rotate: 45,
								align: 'center',
							},
							axisTick: {
								show: false
							},
							axisLine: {
								show: true
							},
							z: 2
						},
						yAxis: {
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#fff'
							}
						},
						dataZoom: [
							{
								type: 'inside'
							}
						],
						series: [
							{
								type: 'bar',
								showBackground: true,
								itemStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: '#83bff6' },
										{ offset: 0.5, color: '#188df0' },
										{ offset: 1, color: '#188df0' }
									]),
									normal: {
										barBorderRadius: 5,

									}
								},
								emphasis: {
									itemStyle: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
											{ offset: 0, color: '#2378f7' },
											{ offset: 0.7, color: '#2378f7' },
											{ offset: 1, color: '#83bff6' }
										])
									}
								},
								data: data,
								label: {
									show: false
								},
							}

						],
						toolbox: {
							feature: {
								dataView: { show: true, readOnly: false },
								magicType: { show: true, type: ['line', 'bar'] },
								restore: { show: true },
								saveAsImage: { show: true }
							},
							iconStyle: {
								color: '#000',
							},
						},
						grid: {
							containLabel: false,
							bottom: '1%',
							right: 0,
							left: '7%',
							top: '10%',
						},
					};
					const zoomSize = 6;
					c.on('click', function (params) {
						console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
						c.dispatchAction({
							type: 'dataZoom',
							startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
							endValue:
								dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
						});
					});
					if (op && typeof op === 'object') {
						c.setOption(op);
					}
					window.addEventListener('resize', c.resize);
				}
			})
		}
		)


		// 取数据并画各月总订单数折线图和各月营业额柱状图
		$(function () {
			$.ajax({
				url: 'ordN', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
				async: true, //异步请求，不用管
				success: function (res) { //回调函数，请求成功后打印返回的结果
					// 数据处理
					let time = res[0].map(function (item, index, array) {
						return item.year + '-' + item.month
					})
					let ordN = res[0].map(function (item, index, array) {
						return item.ordN
					})
					let turnover = res[1].map(function (item, index, array) {
						return item.turnover
					})
					// 画图
					let c = echarts.init(document.querySelector('.panel.line>.chart'))

					/** @type EChartsOption */
					const op = {
						title: {
							text: '月总订单走势图 & 月营业额统计图',
							left: 'center',
							textStyle: {
								color: '#000',
							},
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#999'
								}
							}
						},
						toolbox: {
							feature: {
								dataView: { show: true, readOnly: false },
								magicType: { show: true, type: ['line', 'bar'] },
								restore: { show: true },
								saveAsImage: { show: true }
							},
							iconStyle: {
								color: '#000',
							},
						},
						legend: {
							data: ['订单数', '营业额'],
							top: '10%',
							textStyle: {
								color: '#fff',
							},
						},
						xAxis: {
							type: 'category',
							data: time,
							axisPointer: {
								type: 'shadow'
							},
							axisLine: {
								lineStyle: {
									color: 'gray',
								},
							},
							axisTick: {
								lineStyle: {
									color: "#000",
								},
							},
							axisLabel: {
								color: '#000',
							},
							nameTextStyle: {
								color: '#000',
							},
						},
						yAxis: [
							{
								type: 'value',
								name: '订单数',
								min: 0,
								max: 900,
								interval: 180,
								axisLabel: {
									formatter: '{value} 单',
									color: '#000',
								},
								axisLine: {
									lineStyle: {
										color: 'gray',
									},
								},
								axisTick: {
									lineStyle: {
										color: "#000",
									},
								},
								nameTextStyle: {
									color: '#000',
								},
							},
							{
								type: 'value',
								name: '营业额',
								min: 4000,
								max: 22000,
								interval: 3600,
								axisLabel: {
									formatter: '{value} 元',
									color: '#000',
								},
								axisLine: {
									lineStyle: {
										color: 'gray',
									},
								},
								axisTick: {
									lineStyle: {
										color: "#000",
									},
								},
								nameTextStyle: {
									color: '#000',
								},
							}
						],
						grid: {
							containLabel: false,
							bottom: '10%',
							right: '10%',
							left: '10%',
							top: '20%',
						},
						series: [
							{
								name: '订单数',
								type: 'bar',
								tooltip: {
									valueFormatter: function (value) {
										return value + ' 单';
									}
								},
								data: ordN,
								itemStyle: {
									normal: {
										color: function (params) {
											let colorList = []
											for (let i = 0; i < ordN.length; i++)colorList.push('gray')
											return colorList[params.dataIndex]
										}
									}
								},
							},
							{
								name: '营业额',
								type: 'line',
								yAxisIndex: 1,
								tooltip: {
									valueFormatter: function (value) {
										return value + ' 元';
									}
								},
								data: turnover
							}
						]
					};
					if (op && typeof op === 'object') {
						c.setOption(op);
					}
					window.addEventListener('resize', c.resize);
				}
			})
		}
		)

		// 取数据并画用户下单次数柱状图
		$(function () {
			$.ajax({
				url: 'cusOrdN', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
				async: true, //异步请求，不用管
				success: function (res) { //回调函数，请求成功后打印返回的结果
					// 数据处理
					let ordN = res.map(function (item, index, array) {
						return '累计' + item.ordN + '单'
					})

					let N = res.map(function (item, index, array) {
						return item.N
					})
					// 画图
					let c = echarts.init(document.querySelector('.panel.bar2>.chart'), null, {
						renderer: 'canvas',
						useDirtyRect: false
					});



					/** @type EChartsOption */
					const op = {
						title: {
							text: '累计下单用户人数统计图',
							left: 'center',
							textStyle: {
								color: '#000',
							},
						},
						polar: {
							radius: [30, '75%']
						},
						angleAxis: {
							max: 'dataMax',
							startAngle: 75,
							axisLine: {
								lineStyle: {
									color: '#000',
								},
							},
							axisTick: {
								lineStyle: {
									color: "#000",
								},
							},
						},
						grid: {
							containLabel: false,
							bottom: 0,
							right: '10%',
							left: '10%',
							top: '20%',
						},
						radiusAxis: {
							axisLabel: {
								interval: 0,
								inside: false,
								margin: 2,
								color: '#000',
							},
							z: 100,
							type: 'category',
							data: ordN,
							axisTick: {
								show: false,
							},
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow',
								shadowStyle: {
									color: 'gray',
									opacity: 0.5,
								},
							}
						},
						toolbox: {
							feature: {
								dataView: { show: true, readOnly: false },
								magicType: { show: true, type: ['line', 'bar'] },
								restore: { show: true },
								saveAsImage: { show: true }
							},
							iconStyle: {
								color: '#000',
							},
						},
						series: [
							{
								type: 'bar',
								data: N,
								coordinateSystem: 'polar',
								label: {
									show: true,
									position: 'middle',
									formatter: '{c}人'
								},
								barWidth: '70%',
								itemStyle: {
									borderWidth: 2,
									color: 'green',
								}

							}
						]
					};
					if (op && typeof op === 'object') {
						c.setOption(op);
					}

					window.addEventListener('resize', c.resize);
				}
			})
		}
		)

		// 取数据并画用户分级占比饼图
		$(function () {
			$.ajax({
				url: 'degree', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
				async: true, //异步请求，不用管
				success: function (res) { //回调函数，请求成功后打印返回的结果
					let c = echarts.init(document.querySelector('.panel.line2>.chart'))
					/** @type EChartsOption */
					const op = {
						series: [
							{
								data: res,
								type: 'pie',
								radius: '70%',
								itemStyle: {
									shadowBlur: 200,
									shadowColor: 'white'
								},
								label: {
									color: '#000',
								},
							},
						],
						title: [
							{
								text: '用户等级占比图',
								left: 'center',
								textStyle: {
									color: '#000',
								},
							},
						],
						tooltip: {
							trigger: 'item',
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							formatter: function (name) {
								switch (name) {
									case '一级':
										return name + ' : 0 ≤ 累计下单数 ≤ 3'
									case '二级':
										return name + ' : 4 ≤ 累计下单数 ≤ 6'
									case '三级':
										return name + ' : 7 ≤ 累计下单数 ≤ 10'
								}
							},
							top: 'bottom',
							textStyle: {
								color: '#000',
								fontSize: 10
							},
						},
						toolbox: {
							feature: {
								dataView: { show: true, readOnly: false },
								magicType: { show: true, type: ['line', 'bar'] },
								restore: { show: true },
								saveAsImage: { show: true }
							},
							iconStyle: {
								color: '#000',
							},
						},

					}
					if (op && typeof op === 'object') {
						c.setOption(op);
					}
					window.addEventListener('resize', c.resize);
				}
			})
		}
		)
	</script>
</body>

</html>